<template>
    <div class="person_wrapper">
        <table-list :loading="loading" :columns="columns" rowKey="id" :pagination="false" :data="list">
            <template slot="imageUrl" slot-scope="{ text }">
                <a-avatar @click="showPreview(text)" shape="square" :size="60" :src="text" />
            </template>
            <template slot="age" slot-scope="{ text }">
                <span v-if="text.age">{{ text.age }}岁</span>
            </template>
            <template slot="deptId" slot-scope="{ text }">
                <field-tag :value="text" type="deptId" showType="deptName" :data="expandDeptData"></field-tag>
            </template>
            <template slot="workType" slot-scope="{ text }">
                <field-tag :data="workTypes" :value="text.workType" type="value" showType="label"></field-tag>
            </template>
            <template slot="sex" slot-scope="{ text }">
                {{ text == 'M' ? '男' : '女' }}
            </template>

            <template slot="action" slot-scope="{ index }">
                <a-button size="small" type="danger" :disabled="disabled" @click="remove(index)">删除</a-button>
            </template>
        </table-list>
        <div class="control_box flex-row" v-if="list.length < limit && !disabled">
            <div class="flex-item">
                <a-tree-select v-model="deptId" allowClear style="width:100%"
                    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" :tree-data="deptList"
                    :replaceFields="{ children: 'children', title: 'deptName', key: 'deptId', value: 'deptId' }"
                    placeholder="请选择项目部">
                </a-tree-select>
            </div>
            <div class="flex-item">
                <a-spin :spinning="spinning">
                    <a-select style="width:100%" allowClear show-search v-model="personId" :filter-option="filterOption"
                        placeholder="请选择人员">
                        <a-select-option :value="item.id" v-for="item in personList" :key="item.id">
                            <span v-if="item.code">{{ item.code }}+</span>{{ item.name }}
                        </a-select-option>
                    </a-select>
                </a-spin>
            </div>
            <a-button type="primary" :disabled="personId ? false : true" icon="plus" @click="addPerson">添加</a-button>
        </div>
        <a-modal v-model="isPreview" :footer="null" style="width:400px;" title="查看人脸">
            <img style="width:100%" :src="previewUrl" />
        </a-modal>
    </div>
</template>
<script>
import table from '@/mixins/table';
import { columns } from './columns';
import { workTypes } from '@/views/staff/dictionary';
import { remoteList } from '@/api/system/staff'

export default {
    name: 'AddPerson',
    mixins: [table],
    props: {
        deptList: {
            type: Array,
            default: () => []
        },
        limit: {
            //限制选择人数
            type: Number,
            default: 1
        },
        user: {
            //已选传入的人
            type: String,
            default: ''
        },
        disabled:{
            type:Boolean,
            default:false
        }
    },
    data() {
        return {
            columns,
            workTypes,
            list: [],
            personList: [],
            expandDeptData: [],
            spinning: false,
            deptId: undefined,
            personId: undefined,
            isPreview: false,
            previewUrl: ''
        };
    },
    watch: {
        deptId: function (id) {
            this.personId = undefined;
            this.getUserList(id);
        }
    },
    created() {
        this.dealResource(this.deptList);
        this.initUser(this.user);
    },
    methods: {
        //添加人员
        addPerson() {
            let personId = this.personId;
            if (!personId) return this.$message.error('请选择人员');
            //是否已选择
            let isHasItem = this.list.find(item=>item.id==personId);
            if(isHasItem) return this.$message.error('人员已存在!');
            //查询所选人员全部信息
            let personItem = this.personList.find(item=>item.id==personId);
            this.list = [...this.list,personItem];
            this.personId = undefined;
        },
        //移除
        remove(index) {
            this.list.splice(index,1);
        },
        showPreview(text) {
            this.isPreview = true;
            this.previewUrl = text;
        },
        //查询组织下的人员
        async getUserList(deptId) {
            this.spinning = true;
            this.personList = [];
            try {
                let res = await remoteList({
                    status: "A",
                    page: 1,
                    deptId,
                    size: 1000
                });
                let { list } = res.data;
                this.personList = list;
            } finally {
                this.spinning = false;
            }
        },
        //获取资源列表信息
        dealResource(data) {
            this.expandDeptData = [];
            this.expandData(data);
        },
        //多层次数据展开
        expandData(data) {
            if (Array.isArray(data)) {
                data.map(item => {
                    this.expandDeptData.push(item);
                    if (item.children && item.children.length) {
                        this.expandData(item.children);
                    }
                });
            }
        },
        //初始化人员显示
        async initUser(user){
            if(!user) return false;
            let userList  = this.user.split(',');
            this.loading = true;
            try{
                let res = await remoteList({
                    status: "A",
                    page: 1,
                    size: 1000
                });
                let { list } = res.data;
                list.map(item=>{
                    userList.map((user,index)=>{
                        if(item.id==user){
                            this.list = [...this.list,item];
                            userList.splice(index,1)
                        }
                    })
                })
            }finally{
                this.loading = false;
            }
        },
        filterOption(input, option) {
            return option.componentOptions.children[0].name.toLowerCase().indexOf(input.toLowerCase()) >= 0;
        }
    }
};
</script>
<style lang="scss" scoped>
.control_box {
    margin-top: 10px;
    align-items: center;

    &>div {
        margin-right: 10px;
    }
}
</style>
